
<script lang="ts" setup>
import { ref } from 'vue'
import type { Ref } from 'vue'
import { getImageList } from '@/api/home'

function getTimer() {
    let date = new Date(),
        month = date.getMonth() + 1,
        strDate = date.getDate()
    month < 10 ? month = Number(`0${month}`) : month
    strDate < 10 ? month = Number(`0${strDate}`) : month

    return `${month}月${strDate}日`
}

const timer: Ref<string> = ref(getTimer())
// console.log(timer.value);
const formatDate = date => `${date.getMonth() + 1}月${date.getDate()}日`;
function onConfirm(value) {
    timer.value = formatDate(value);
};

interface Iimg {
    imgid: number
    imgurl: string
    price: string
    title: string
}

const imgList: Ref<Iimg[]> = ref([])

imgList.value = getImageList()

</script>

<template>
    <div>
        <van-nav-bar title="浏览记录" left-text="返回" left-arrow @click-left="$router.back()" />
        <div class="container">
            <van-calendar :poppable="false" :show-subtitle="true" color="#d3d3d3" row-height="30" :show-title="false"
                :show-confirm="false" :show-mark="false" :style="{ height: '110px' }" @confirm="onConfirm" />
            <p style="font-size: 16px; color: gray">{{ timer }}</p>


            <div class="content">
                <div class="image" v-for="item in imgList">
                    <img :src=item.imgurl>
                    <p style="color: #f66;">{{item.price}}</p>
                    <p style="margin-top: 0;">{{item.title}}</p>
                </div>
                <!-- <div class="image">
                    <van-image
                        src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/发现/u724.png"></van-image>
                    <p>价格</p>
                    <p>标题</p>
                </div>
                <div class="image">
                    <van-image
                        src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/发现/u724.png"></van-image>
                    <p>价格</p>
                    <p>标题</p>
                </div> -->
            </div>
            <!-- <van-grid :column-num="3" :gutter="10">
                            <van-grid-item v-for="item in imgList" border="gray">
                                <van-image :src=item.imgurl />

                                <p style="color: #f66;font-size: 16px;">{{item.price}}</p>
                                <p>{{item.title}}</p>

                            </van-grid-item>
                        </van-grid> -->

        </div>
    </div>
</template>

<style lang="scss" scoped>
.content {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-around; */
}

.image {
    display: flex;
    flex-direction: column;
    width: 110px;
    height: 120px;
    margin:10px 7px;
}
.image img{
    width: 100%;
    /* height: 100%; */
    height: 73px;
}
.image  p{
    font-size: 14px;
}
</style>

